<template><!--预算调整-->
  <div class="job">
    <div style="width: 100%;height: 60px;background:#F9F9F9;">
      <div style=" float: left;margin-top: 20px; display: flex;padding: 0px 20px;border-bottom: 1px solid #0270C1;background-color: white;width: 95%;margin-left: 14px">
        <div>
          <svg t="1665660514807" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4262" width="32" height="32"><path d="M768 145.664l-384 384V640h110.336l384-384L768 145.664z m30.165333-90.496l170.666667 170.666667a42.624 42.624 0 0 1 0 60.330666l-426.666667 426.666667A42.538667 42.538667 0 0 1 512 725.333333H341.333333a42.666667 42.666667 0 0 1-42.666666-42.666666v-170.666667c0-11.306667 4.48-22.186667 12.501333-30.165333l426.666667-426.666667a42.624 42.624 0 0 1 60.330666 0zM398.506667 128a42.666667 42.666667 0 0 1 0 85.333333H170.666667a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h597.333333a42.666667 42.666667 0 0 0 42.666667-42.666667v-227.84a42.666667 42.666667 0 0 1 85.333333 0V853.333333a128 128 0 0 1-128 128H170.666667a128 128 0 0 1-128-128V256a128 128 0 0 1 128-128h227.84z" p-id="4263" fill="#1296db"></path></svg>   </div>

        <div style="text-align: center;line-height: 40px;">预算调整：</div>

        <div></div>
      </div>

    </div>
    <div style="width: 98%;float: left;display: flex;height: 80px;background:#FFFFFF;border: 1px solid #F1F1F1;margin: 10px 1% 0px" >
      <div style="margin: 10px 10px;">
        <div>流程编号：</div>
        <el-input
            style="margin-top: 5px;width: 150px"
            v-model="form.processBh"
            placeholder="请输入流程编号"
            :suffix-icon="Search"
        />
      </div>
      <div style="margin: 10px 10px;float: left">
        <div>调整类型：</div>
        <el-form-item style="width:150px;margin-top: 5px">
          <el-select v-model="form.tzlx" placeholder="调整类型">
            <el-option
                v-for="item in d.stale"
                :label="item.key"
                :value="item.value"
            />

          </el-select>
        </el-form-item>
      </div>
      <div style="margin: 10px 10px;float: left">
        <div>申请日期：</div>
        <div style="margin-top: 5px;margin-left:-7px">
          <el-date-picker
              v-model="form.kssj"
              type="date"
              format="YYYY/MM/DD"
              placeholder="Pick a day"
              :size="size"
          />
          <span>--</span>
          <el-date-picker
              v-model="form.jssj"
              type="date"
              format="YYYY/MM/DD"
              placeholder="Pick a day"
              :size="size"
          />
        </div>
      </div>
      <div style="margin-top: 35px"><el-button @click="sousuo"><el-icon><Search /></el-icon></el-button>
        <el-button  @click="chongzhi"><el-icon><RefreshLeft /></el-icon></el-button>
      </div>
      <div  style="margin-top: 35px;margin-left: 280px">
        <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item class="btn01"><router-link :to="{path:'/budgetChanges'}" event="mouseover">发起预算变更</router-link></el-dropdown-item>
              <el-dropdown-item class="btn01"><router-link :to="{path:'/budgetAmendment'}" event="mouseover">发起预算追加</router-link></el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

    </div>


    <el-table
        :header-cell-style="{background:'#F5F7FA'}"
        ref="multipleTableRef"
        :data="d.tableData"
        style="width: 98%;margin-top: 100px;margin: 10px 1% 0px;height: 450px"
        @selection-change="handleSelectionChange"
        stripe
    >
      <el-table-column property="processBh" label="流程编号" width="180" align="center"></el-table-column>
      <el-table-column property="processTitle" label="流程标题" width="120" align="center"/>
      <el-table-column property="empName" label="申请人" width="180" align="center"></el-table-column>
      <el-table-column property="processSqrq" label="申请日期" width="180" align="center">
        <template #default="s">
          <span>{{s.row.processSqrq.slice(0,10)}}</span>
        </template>
      </el-table-column>
      <el-table-column property="tzlx" label="调整类型" align="center">
        <template #default="a">
          {{a.row.tzlx==0?'预算追加':'预算变更'}}
        </template>
      </el-table-column>
      <el-table-column property="tzje" label="调整金额" align="center"/>
      <el-table-column property="processState" label="流程状态" align="center" :formatter="formatter">

      </el-table-column>
      <el-table-column  label="操作" align="center">
        <template #default="a">
          <el-button type="primary" v-if="a.row.tzlx==0" @click="yszj(a.row)">查看详情</el-button>
          <el-button type="primary" v-if="a.row.tzlx==1" @click="ysbg(a.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="Logistics_Paging" >
      <el-pagination
          v-model:currentPage="d.pageNo"
          v-model:page-size="d.pageSize"
          :page-sizes="[5,10, 20, 30, 40]"
          small="small"
          layout="total, sizes, prev, pager, next, jumper"
          :total="d.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
    </div>
  </div>


</template>

<script lang="ts" setup>
import {onBeforeMount, reactive, ref} from "vue";
import axios from "axios";
import {useRouter} from "vue-router";
const store = useStore();
import {log} from "echarts/types/src/util/log";
import {useStore} from "vuex";
const d = reactive({
  //table当前展示的数据
  list:null,
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:10,
  //发票类型
  typeDate:[],
  //表格数据
  tableData:[],
  //发票状态
  stale:[{key:'预算追加',value:'0'},{key:'预算变更',value:'1'}]
});
//表单数据模型
let form = reactive({
  empCard:store.state.user.sysEmployee.empCard,
  empId:1,
  tzlx:'',
  processBh:'',
  kssj:'',
  jssj:''
})
//清空表单
const qk=()=>{
  form.tzlx=null;
  form.processBh=null;
  form.jssj=null;
  form.kssj=null;

}

const ALltableData=ref([])

const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  console.log("翻页，当前为第几页", val)
  d.pageNo = val;
  getTabelData();
}

const GetData = ()=>{
  console.log()
  axios.post("financeOa/process/allProcess",form).then((res)=>{
    console.log(res.data.data)
    //分页开始
    var data =res.data.data;//存入查询出来的所有数据
    ALltableData.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelData();//调用方法
    d.tableData = res.data.data
    //分页结束

    console.log("1111"+res.data.data)
    console.log(d.tableData)
  }).catch()
}

onBeforeMount(()=>{
  GetData();
})


//搜索按钮
const sousuo=()=>{

  GetData();

}
//重置按钮
const chongzhi=()=>{
  qk();
  GetData();
}
const router=useRouter();
//进入预算追加详情页面
const yszj=(row)=>{
  router.push({path:"/fkgl/AppendDetails",query:{processBh:row.processBh}})
  console.log(row.processBh)
}
//进入预算变更详情界面
const ysbg=(row)=>{
  router.push({path:"/fkgl/ChangeDetails",query:{processBh:row.processBh}})
  console.log(row.processBh)
}


const formatter = (row, column,cellValue) => {
  //row每行的内容 column每一列的属性信息 cellValue单元格的值
  if(cellValue === 0){ //cellValue会自动将0值过滤出来不展示 单独做判断
    return '未审核'
  }else if(cellValue === 1){
    return '已审核'
  }else if(cellValue === 2){
    return '审核失败'
  }
}

</script>

<style scoped>
.job{
  width: 100%;
  height: 100%;
  background: #F1F1F1;
}

.btn01 a{
  text-decoration: none;
  color: #1a1a1a;
}
</style>